<template>
  <div class="container">
    <h1>实时天气预报</h1>
    <el-row class="search-row">
      <el-col :span="18">
        <el-input 
          v-model="city" 
          placeholder="输入城市名称" 
          clearable
          @keyup.enter="getWeather"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="getWeather">搜索</el-button>
      </el-col>
    </el-row>
    
    <el-card class="weather-card" v-if="weatherData">
      <div class="weather-info">
        <div class="weather-details">
          <p class="temperature">温度: {{ weatherData.main.temp }}℃</p>
          <p class="condition">天气状况: {{ weatherData.weather[0].description }}</p>
          <p class="city-name">城市: {{ weatherData.name }}</p>
          <p class="humidity">湿度: {{ weatherData.main.humidity }}%</p>
          <p class="wind">风速: {{ weatherData.wind.speed }} m/s</p>
        </div>
        <div class="weather-icon">
          <img 
            :src="`https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`" 
            :alt="weatherData.weather[0].description"
          >
        </div>
      </div>
    </el-card>
    
    <el-alert 
      v-if="errorMessage" 
      :message="errorMessage" 
      type="error" 
      show-icon 
      :closable="false"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElInput, ElButton, ElCard, ElRow, ElCol, ElAlert } from 'element-plus';

const city = ref('大河镇');
const weatherData = ref(null);
const errorMessage = ref('');
const apiKey = '588a0924c6cbfd5b18eb1ece98c8dc47'; // 建议将API密钥放在环境变量中

const getWeather = async () => {
  if (!city.value) {
    errorMessage.value = '请输入城市名称！';
    return;
  }
  
  errorMessage.value = '';
  
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city.value)}&appid=${apiKey}&units=metric`
    );
    const data = await response.json();

    if (data.cod === '404') {
      errorMessage.value = '城市未找到';
      weatherData.value = null;
      return;
    }
    
    if (data.cod !== 200) {
      errorMessage.value = '获取天气数据失败，请稍后重试';
      weatherData.value = null;
      return;
    }

    weatherData.value = data;
  } catch (error) {
    console.error('获取天气数据错误:', error);
    errorMessage.value = '网络错误，请检查网络连接';
    weatherData.value = null;
  }
};

onMounted(() => {
  // 组件挂载后，自动查询默认城市的天气
  getWeather();
});
</script>

<style scoped>
.container {
  background: linear-gradient(to bottom, rgba(115, 159, 199, 0.84) 0%, #ffffff 100%);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 20px auto;
  min-height: 300px;
}

h1 {
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.search-row {
  margin-bottom: 20px;
  gap: 10px;
}

.weather-card {
  margin-top: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.weather-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
}

.weather-details {
  line-height: 1.8;
}

.temperature {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.condition {
  font-size: 18px;
  color: #666;
}

.city-name {
  font-size: 16px;
  color: #444;
}

.weather-icon img {
  width: 120px;
  height: 120px;
}

.el-alert {
  margin-top: 20px;
}
</style>
